<template>
	<view class="container">
		<view class="head_bg">
			<image src="https://mgr.qixiaocheng.com/images/banner.jpg"></image>
		</view>
		<!-- 店铺页面组件 -->
		<!-- <Page :items="items" /> -->

		<view class="store">
			<view class="m-b">
				<u-search v-model="shop_name" @custom='getPageData' @search='getPageData' input-align="center" height="70"></u-search>
			</view>
			<view class="s_l" v-for="(item,index) in items" :key="index"> 
				<view class="s_img">
					<image :src='item.logo_image_url' alt="" style="width: 100%;height:100%;border-radius: 20rpx;">
				</view>
				<view class="p-20">
					<view class="store_name">
						{{item.shop_name}}
					</view>
					<view class="address">
						{{item.shop_address}}
					</view>
				</view>
				<view class="flex f-r">
					<view class="s_btn" @click="wx(item.shop_wx_url)">
						门店微信
					</view>
					<view class="s_btn" @click="getCallPhone(item.appointment,item.selection,item.service,item.contact_us)">
						联系我们
					</view>
				</view>
			</view>
		</view>
		
		<u-popup v-model="show" mode="center">
			<view class="bg_cuo">
				<view class="bg">
					<image style="width: 88%;height: 65%; padding:132rpx 30rpx 0 30rpx" :src="wxImg" alt="">
					
				</view>
				<view class="cuo" @click="close">
					×
				</view>
			</view>
			
		</u-popup>
		
		<u-popup v-model="showS" mode="center">
			<view class="bgs" @click="ToshowS">				
			</view>
		</u-popup>
		
		<u-popup v-model="showC" mode="center">
			<view class="bgc" @click="ToshowC">				
			</view>
		</u-popup>
		
		
		<u-action-sheet :list="list" @click="click" v-model="showList"></u-action-sheet>
	</view>
</template>

<script>
	import {
		setCartTabBadge
	} from '@/core/app'
	// import * as Api from '@/api/page'
	import * as Api from '@/api/pony'
	import Page from '@/components/page'

	const App = getApp()

	export default {
		components: {
			Page
		},
		data() {
			return {
				// 页面参数
				options: {},
				// 页面属性
				page: {},
				// 页面元素
				items: [],
				isLogin: true,
				keyword: '遥看瀑布挂前川',
				show:false,
				showS:false,
				showC:false,
				wxImg:'',
				shop_name:'',
				list: [{
					text: '点赞',
				}, {
					text: '分享'
				}, {
					text: '评论'
				}],
				showList: false,
				phone:'',
				phone2:'',
				phone3:'',
				phone4:''
			}
		},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			// 当前页面参数
			this.options = options
			let name=uni.getStorageSync('name')
			console.log(name)
			if (name=='new') {
				this.showC=true;
				uni.setStorageSync('name','')
			}else if(name=='old'){
				this.showS=true;
				uni.setStorageSync('name','')
			}
			
			// 加载页面数据
			this.getPageData();
		},

		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow() {
			// 更新购物车角标
			// setCartTabBadge();
			this.handleLogin()
		},

		methods: {
			handleLogin() {
				!this.isLogin && this.$navTo('pages/login/login')
			},
			/**
			 * 加载页面数据
			 * @param {Object} callback
			 */
			getPageData(callback) {
				const app = this
				// const pageId = app.options.pageId || 0
				Api.getShopList({
					shop_name:this.shop_name
				})
					.then(result => {
						// 设置页面数据
						app.items = result.data.list.data
					})
					.finally(() => callback && callback())
			},
			
			close(){
				this.show=false
			},
			ToshowS(){
				this.showS=false
			},
			ToshowC(){
				this.showC=false
			},
			// 联系商家
			getCallPhone(m,n,j,k) {
				this.list= [{
					text: '预约拍照'+ m
				}, {
					text: '预约选片'+ n
				}, {
					text: '售后服务'+ j
				}]
				this.showList=true;
				this.phone=m;
				this.phone2=n;
				this.phone3=j;
				this.phone4=k;
			},
			click(index) {
				let phoneNum=''
				if(index==0){
					phoneNum=this.phone
				}else if(index==1){
					phoneNum=this.phone2
				}else if(index==2){
					phoneNum=this.phone3
				}else if(index==3){
					phoneNum=this.phone4
				}
				uni.makePhoneCall({
					phoneNumber: phoneNum, //电话号码
					success: function(e) {
						console.log(e);
					},
					fail: function(e) {
						console.log(e);
			
					},
				})
			},
			/**
			 * 设置顶部导航栏
			 */
			setPageBar() {
				const {
					page
				} = this
				// 设置页面标题
				uni.setNavigationBarTitle({
					title: page.params.title
				});
				// 设置navbar标题、颜色
				uni.setNavigationBarColor({
					frontColor: page.style.titleTextColor === 'white' ? '#ffffff' : '#000000',
					backgroundColor: page.style.titleBackgroundColor
				})
			},
			
			
			wx(m){
				this.show=true;
				this.wxImg=m
			}

		},

		/**
		 * 下拉刷新
		 */
		onPullDownRefresh() {
			// 获取首页数据
			this.getPageData(() => {
				uni.stopPullDownRefresh()
			})
		},

		/**
		 * 分享当前页面
		 */
		onShareAppMessage() {
			const app = this
			const {
				page
			} = app
			return {
				title: page.params.share_title,
				path: "/pages/index/index?" + app.$getShareUrlParams()
			}
		},

		/**
		 * 分享到朋友圈
		 * 本接口为 Beta 版本，暂只在 Android 平台支持，详见分享到朋友圈 (Beta)
		 * https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share-timeline.html
		 */
		onShareTimeline() {
			const app = this
			const {
				page
			} = app
			return {
				title: page.params.share_title,
				path: "/pages/index/index?" + app.$getShareUrlParams()
			}
		}

	}
</script>

<style lang="scss" scoped>
	/deep/.u-action{
		background-color: #000;
		color: #fff !important;
		border-radius: 50rpx;
		padding: 10rpx 20rpx;
		margin-right: 20rpx;
		width: 120rpx !important;
	}
	.flex {
		display: flex;
	}

	.flex-y-c {
		align-items: center;
	}

	.flex-x-b {
		justify-content: space-between;
	}

	.flex-x-a {
		justify-content: space-around;
	}

	.f-r {
		float: right;
	}

	.container {
		background-color: #F5F5F5;
	}
	.m-b{
		margin-bottom: 20rpx;
		border: 1rpx solid #000;
		border-radius: 50rpx;
	}
	.p-20 {
		padding: 20rpx;
	}

	.head_bg {
		width: 750rpx;
		height: 510rpx;
	}

	.head_bg image {
		width: 100%;
		height: 100%;
	}

	.store {
		padding: 30rpx;
		border-radius: 20rpx 20rpx 0 0;
		margin-top: -59rpx;
		background-color: #F5F5F5;
		position: relative;
		margin-bottom: 30rpx;
	}

	.s_l {
		height: 567rpx;
		background-color: #fff;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
	}

	.s_img {
		height: 324rpx;
		background: #000000;
		border-radius: 20rpx;
	}

	.s_img img {
		width: 100%;
		height: 100%;
		border-radius: 20rpx;
	}

	.store_name {
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #231816;
		line-height: 68rpx;
	}

	.address {
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #999999;
		line-height: 68rpx;
	}

	.s_btn {
		width: 146rpx;
		height: 56rpx;
		border: 1rpx solid #231816;
		border-radius: 28rpx;
		text-align: center;
		line-height: 56rpx;
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #231816;
		margin-right: 20rpx;
	}
	
	.bg{
		background-image: url('http://tu.qixiaocheng.com/xiaomahuanteng/11161.png');
		background-size: cover;
		width: 480rpx;
		height: 543rpx;
		background-position: 0 0 ;
		position: relative;
	}
	
	.bg img{
		width: 277rpx;
		height: 260rpx;
		position: absolute;
		top: 200rpx;
		left: 100rpx;
	}
	
	.bg_cuo {
			position:relative;
			width: 480rpx;
			height: 700rpx;
	}
	.cuo{
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		border:  1rpx solid #fff;
		color: #fff;
		position: absolute;
		left: 43%;
		bottom: 0;
		text-align: center;
		line-height: 80rpx;
		
	}
	.bgs{
		background-image: url('http://tu.qixiaocheng.com/xiaomahuanteng/1116l.png');
		background-size: cover;
		width: 550rpx;
		height: 654rpx;
		background-position: 0 0 ;
		position: relative;
	}
	.bgc{
		background-image: url('http://tu.qixiaocheng.com/xiaomahuanteng/1116x.png');
		background-size: cover;
		width: 550rpx;
		height: 654rpx;
		background-position: 0 0 ;
		position: relative;
	}
</style>
